<template>
  <section class="cinema-view">
    <div v-for="item in cinemalist">
        <div class="title" @click="isshow=!isshow"><span>{{item.name}}</span></div>
        <div class="" v-show="isshow" >
            <div class="cinema-wrap" v-for="item1 in item.list ">
                <div class="cinema">
                    <div class="cinema-title">
                        <div class="cinema-title-cinemaname">{{item1.name}}</div>
                        <span class="cinema-title-tip">
                            <i>{{item1.labels[0]}}</i>
                            <i>{{item1.labels[1]}}</i>
                        </span>
                        <span class="cinema-title-address">{{item1.address}}</span>
                        <div class="cinema-title-location">{{item1.geocode}}</div>
                    </div>
                    <span class="pull-right">></span>
                </div>
             </div>
        </div>
    </div>
  </section>
</template>
<script>

import $ from 'jquery';
export default {
   
data:function(){
    return{
          cinemalist:[],
          isshow:false
    }
    },
    mounted:function(){
        var url = 'http://localhost:3000/cinema?time=' + new Date().getTime();
        var that = this;
        $.get(url).then(function(res){
           let cinemas  = res.data.cinemas;
           let  districtnames = [];
           cinemas.forEach((item) => {
               districtnames.push(item.district.name);
           });
           districtnames = Array.from( new Set(districtnames));
           
           districtnames.forEach((item) => {
               var obj ={
                   name:item,
                   list:[]
               };
               that.cinemalist.push(obj);
           })
        cinemas.forEach((item) => {
               that.cinemalist.forEach((item1) => {
                   if(item.district.name = item1.name){
                        item1.list.push(item);
                   }
               })
           })
           console.log(that.cinemalist);
            

        })
    }
 }

</script>
<style scoped>
.cinema-view{
    margin-top: 50px;
    width: 100%;
    background: #fff;
}
.title{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 16px;
    background: #e1e1e1;
    margin-bottom: 1px;
    color: #636363;
    cursor: pointer;
}
.cinema-wrap{
    margin: 0 auto;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    min-width: 320px;
}
.ciname{
        width: 75%;
    min-width: 230px;
    float: left;
    cursor: pointer;
    overflow: hidden;
}
.ciname-title{
    width: 75%;
    min-width: 230px;
    float: left;
    cursor: pointer;
    overflow: hidden;
}
.cinema-title-cinemaname{
display: inline-block;
    font-size: 16px;
    width: 100%;
    margin-bottom: 5px;
}
.cinema-title-tip{
 display: inline-block;
    margin-bottom: 5px;
    font-size: 10px;

}
.cinema-title-address{
display: inline-block;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: #ccc;
}
.cinema-title-location{
font-size: 12px;
    color: #ccc;

}
.pull-right{
        padding-right: 15px;
    line-height: 36px;
    color: #c6c6c6;
    float: right !important;
        padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
</style>

